<template xmlns:el-col="http://www.w3.org/1999/html">


  <div >

    <div >

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#FFFFFF"
        text-color="#330000"
        active-text-color="#ffd04b">

        <el-menu-item index="4">

          <img src="http://qzd3bv2qc.hb-bkt.clouddn.com/31ce7f20bbaae62a1e377c9f79e3aa7.png" />

        </el-menu-item>

        <el-row :gutter="10">

          <el-col :span="2">
            <el-menu-item index="0">首页</el-menu-item>
          </el-col>

          <el-col :span="2">
            <el-menu-item index="1">影片</el-menu-item>
          </el-col>

          <el-col :span="2">
            <el-menu-item index="2">影院</el-menu-item>
          </el-col>
          <el-col :span="2">
            <el-menu-item index="3" v-if="!validate">
              <router-link to="/login" target="parent">登录</router-link>
            </el-menu-item>

            <el-submenu index="3" v-if="validate">

              <template slot="title">
                <img style="border-radius:100%" :src=user.image
                     class="avator"/>
                <span class="name"  style="color: black;">{{user.userName}}</span>
              </template>

              <el-menu-item index="10-1">登出</el-menu-item>
              <el-menu-item index="10-2">个人中心</el-menu-item>
              <!--<el-menu-item index="10-3">订单详情</el-menu-item>-->

            </el-submenu>
          </el-col>

        </el-row>
      </el-menu>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {

        activeIndex2: '1',
        input: '',
        validate:false,
        user:{
          image:'',
          userName:''
        }
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if (key==0){
          this.$router.push("/")
        }
        //登陆页面
        if (key=="3"&&!this.validata){

          this.$router.push("/login")
        }
        //用户退出
        if (key=="10-1"){
          this.$axios.post("tpp-cloud-user/user/loginOut").then(res => {
            if (res.data.code==0){
              //清除token
              this.$cookies.remove("token")
              //刷新页面
              location.reload()
            }
          })
        }
        //用户详细信息
        if (key=="10-2"){
          this.$router.push("/user/user-detail")
        }

      },
      toUsers: function () {
        this.$router.push("/users")
      },

    },

    mounted() {
      this.$axios.post("tpp-cloud-user/user/findUserByToken").then(res => {
        console.log(res.data)

        if (res.data.code==0) {
          this.validate = true;
          this.user = res.data.data
        }else{

          this.$router.push("/").catch(data => {  })

        }
      })
     // this.restaurants = this.loadAll();
    }
  }
</script>

<style scoped>
  .avator {
    width: 40px;
    height: 40px;
  }
  .name {
    margin-top: 20px;
    color: #333;
  }
  .posimg {

    left: auto;

  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
